<template>
    <div class="login-container">
       <el-form class="login-form"  :rules="rules" ref="form" :model="form" label-width="80px">
           <div class="red">{{msg}}</div>
           <h1>M站漫画，爱你所爱</h1>
           <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
               <el-input type="password" v-model="form.password"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="submitForm('form')">用户登录</el-button>
           </el-form-item>
           
       </el-form>
    </div>
</template>
<script>
import Login from "@/api/login"
export default {
    data() {
        return {
            form: {
                username:'',
                password:''
            },
            msg:"",
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '没写密码你想干嘛', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          
          if (valid) {
            Login.doLogin(this.form.username,this.form.password).then(res=>{
                const loginObj = res.data;
                if(loginObj.code == 0){
                    localStorage.setItem('m-user',JSON.stringify(loginObj.data))
                    this.$router.push('/')
                }else{
                    this.msg = loginObj.msg
                }
            })
        
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
}
</script>
<style scoped>
    .login-container{
        width: 100%;
        position:absolute;
        background:url("../assets/login-back.jpg");
    }
    .login-form{
        width: 350px;
        background-color: rgb(255,255,255,0.8);
        margin: 160px auto;
        padding: 30px;
        padding-right: 85px;
        border-radius: 15px;
    }
    red{
        color:red
    }
</style>